<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height:95vh;
            display:flex;
            align-items: center;
            justify-content: center;
        }
        .container{
            display:flex;
            width:90vw;
        }
        .panel{
            display:flex;
            flex:1;
            align-items:flex-end;
            color:white;
            font-size:20px;
            padding-left:15px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height:80vh;
            margin:10px;
            border-radius:80px;
            transition: all 700ms ease-in;
        }
        h3{
            opacity: 0;
        }
        .active{
            flex:5;
        }
        .panel.active h3{
            opacity: 1;
            transition: all 700ms ease-in 0.4s;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Explore The Wrold</h3>
        </div>

        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Wild Forest</h3>
        </div>
        
        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
            <h3>Sunny Beach</h3>
        </div>

        <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
            <h3>City on Winter</h3>
        </div>

        <div class="panel" style="background-image:  url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
            <h3>Mountains - Clouds</h3>
        </div>
    </div>

    <script>
        document.addEventListener('click',(event) => {
            if(!(event.target.className === 'panel')){
                return
            }
            const panel = document.querySelectorAll('.panel')

            panel.forEach(key => {
                key.classList.remove('active')
            })

            event.target.classList.add('active')
        })

        // const panel = document.querySelectorAll('.panel')
        // console.log(panel)
        // panel.forEach(key => {
        //     key.addEventListener('transitionend',key.classList.toggle)
        // })
    </script>
</body>
</html>